<template>

  <div>
    <template>
      <el-table :data="Rroles" border style="width: 100%">
        <el-table-column prop="roleId" label="角色编号">
        </el-table-column>
        <el-table-column prop="roleName" label="角色名">
        </el-table-column>
        <el-table-column prop="moduleState" label="状态">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="openDialog1(scope.row)" type="text" size="small">修改</el-button>
            <span v-if="scope.row.moduleState=='启用'">
              <el-button @click="banRole(scope.row)" type="text" size="small">禁用</el-button>
            </span>
            <span v-else>
              <el-button @click="activeRoel(scope.row)" type="text" size="small">激活</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog title="新增用户" :visible.sync="dialogVisible1" width="30%" :close="closeDialog1">
      <el-form :model="tempRole" ref="tempRole" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色id" prop="text">
          <el-input type="text" v-model="tempRole.roleId" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="text">
          <el-input type="text" v-model="tempRole.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible1=false">取消</el-button>
          <el-button type="primary" @click="changeRole('tempRole')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible1: false,
        tempRole: "",
        user: "",
        Rroles: [{
          "roleId": "",
          "roleName": "",
          "moduleState": "",
          "createBy": "",
        }],
      }
    },
    methods: {
      banRole(tRole) {
        if(tRole.roleId==0){
          alert("超级管理员不可禁用");
          return
        }
        this.$http.post("issueRole/banRole",{
          "roleId": tRole.roleId
        }).then(resp=>{
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
            location.reload();
          } else {
            this.$message.error(resp.data.msg);
          }
        })
      },
      activeRoel(tRole) {
        this.$http.post("issueRole/activeRole",{
          "roleId": tRole.roleId
        }).then(resp=>{
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
            location.reload();
          } else {
            this.$message.error(resp.data.msg);
          }
        })
      },
      changeRole() {
        this.$http.post("issueRole/changeroleinfo", {
          "modifyBy": this.user.username,
          "roleId": this.tempRole.roleId,
          "roleName": this.tempRole.roleName,
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
            this.dialogVisible1 = false;
            window.location.reload();
          } else {
            this.$message.error("resp.data.msg")
          }
        })
      },
      closeDialog1() {
        this.tempRole = ""
      },
      openDialog1(tRole) {
        this.tempRole = JSON.parse(JSON.stringify(tRole));
        this.dialogVisible1 = true;
      },
      loaduser() {
        this.user = JSON.parse(localStorage.getItem("com.woniu.loginUser"));
      },
      loadRoles() {
        this.$http.get("issueRole/getRoleListwithclose").then(resp => {
          if (resp.data.code = 200) {
            this.Rroles = resp.data.data;
          } else {
            this.$message.error(resp.data.msg);
          }
        })
      }
    },
    created() {
      this.loaduser();
      this.loadRoles();
    }
  }
</script>

<style>
</style>
